<template>
    <view class="header">
        <view class="header-swiper">
            <u-swiper :list="swiperList" mode="rect" :height="350"></u-swiper>
        </view>

        <view class="header-title">
            <text class="title-h1">汉韵</text>
            <text class="title-wellcom">欢迎您</text>
        </view>
    </view>
</template>

<script setup>
const swiperList = [
    {
        image: '/static/login/chunfen.png',
        title: '春分'
    },
    {
        image: '/static/login/lixia.png',
        title: '立夏'
    },
    {
        image: '/static/login/guyu.png',
        title: '谷雨'
    }
];
</script>

<style lang="scss">
.header {
    .header-swiper {
        width: 100%;
    }

    .header-title {
        margin-top: 30rpx;
        margin-left: 60rpx;

        .title-h1 {
            font-size: $han-font-size-xl;
            font-weight: 700;
        }

        .title-wellcom {
            font-size: $han-font-size-base;
            color: $han-global-secondary-font-color;
            margin-top: 10rpx;
            margin-left: 20rpx;
        }
    }
}
</style>
